<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>An Le - Professional Web Developer / Web Designer</title>

	<!-- Styles -->
	<link href="css/template.css" rel="stylesheet" type="text/css">
	<link href="css/switcher.css" rel="stylesheet" type="text/css">

	<!--[if lt IE 9]>
	<script src="//html5shim.googlecode.com/svn/trunk/html5.js"></script>
	<![endif]-->

	
</head>
<body class="pattern1">
	<div id="wrapper">
		<div id="wrapper-inner">
			<div id="menu">
				<header>
					<section>
						<!-- * -->
					
						<nav>
							<ul id="table-menu">
								<li id="home-link" class="current">
									<a href="#home">Home</a>
								</li>
								<li id="about-link">
									<a href="#about">About</a>
								</li>
								<li id="services-link">
									<a href="#services">Services</a>
								</li>
								<li id="network-link">
									<a href="#network">Network</a>
								</li>
								<li id="contact-link">
									<a href="#contact">Contact</a>
								</li>
							</ul>
						</nav>
					
						<!-- * -->
					</section>
				</header>
			</div>
			
			<div id="wrapper-left">
				<div id="portfolio">
					<section>
						<!-- * -->
						
						<div id="portfolio-wrapper">
							<div id="portfolio-content">
								<ul id="portfolio-items">
								
								<!-- Portfolio 1 -->
									<li id="portfolio1" class="portfolio-item">
										<article>								
											<!-- * -->
											
											<div class="col-desc">
												<h3 class="first">Lorem ipsum dolor</h3>
												<p>
													Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
													Ut enim ad minim veniam...
												</p>
												<p>Lorem ipsum dolor sit amet:</p>
												<p></p>
												<ul class="links">
													<li><a href="#">Facebook link</a></li>
													<li><a href="#">Website link</a></li>
												</ul>
											</div>
											
											<div class="col-media scroll">
												<div class="scrollbar"><div class="track"><div class="thumb"><div class="end"></div></div></div></div>
												<div class="viewport">
													<div class="overview">
														<ul class="list-vert">
															<li>
																<a class="lightbox" href="img/portfolio/portfolio1.jpg">
																	<img src="img/portfolio/1/thumbnail1.jpg" height="100" width="100" alt="lorem1" />
																</a>
															</li>
															<li>
																<a class="lightbox" href="img/portfolio/portfolio1.jpg">
																	<img src="img/portfolio/1/thumbnail2.jpg" height="100" width="100" alt="ipsum1" />
																</a>
															</li>
															<li>
																<a class="lightbox" href="img/portfolio/portfolio1.jpg">
																	<img src="img/portfolio/1/thumbnail3.jpg" height="100" width="100" alt="dolor1" />
																</a>
															</li>
															<li>
																<a class="lightbox" href="img/portfolio/portfolio1.jpg">
																	<img src="img/portfolio/1/thumbnail4.jpg" height="100" width="100" alt="sit1" />
																</a>
															</li>
														</ul>
													</div>
												</div>
											</div>
											
											<!-- * -->
										</article>
									</li>
									
								<!-- Portfolio 2 -->	
									<li id="portfolio2" class="portfolio-item">
										<article>
											<!-- * -->
											
											<h3 class="first">Lorem ipsum dolor</h3>
											
											<div class="slider">
												<div class="viewport">
													<ul class="overview">
														<li class="slide active">
															
															<ul class="list-horz">
																<li>
																	<a class="lightbox" href="img/portfolio/portfolio2.jpg">
																		<img src="img/portfolio/2/thumbnail1.jpg" height="100" width="100" alt="lorem2" />
																	</a>
																</li>
																<li>										
																	<a class="lightbox" href="img/portfolio/portfolio2.jpg">
																		<img src="img/portfolio/2/thumbnail2.jpg" height="100" width="100" alt="ipsum2" />
																	</a>
																</li>
																<li>										
																	<a class="lightbox" href="img/portfolio/portfolio2.jpg">
																		<img src="img/portfolio/2/thumbnail3.jpg" height="100" width="100" alt="dolor2" />
																	</a>
																</li>
															</ul>
															
														</li>
														<li class="slide">									
															
															<ul class="list-horz">
																<li>
																	<a class="lightbox" href="img/portfolio/portfolio2.jpg">
																		<img src="img/portfolio/2/thumbnail1.jpg" height="100" width="100" alt="lorem2" />
																	</a>
																</li>
																<li>										
																	<a class="lightbox" href="img/portfolio/portfolio2.jpg">
																		<img src="img/portfolio/2/thumbnail2.jpg" height="100" width="100" alt="ipsum2" />
																	</a>
																</li>
																<li>										
																	<a class="lightbox" href="img/portfolio/portfolio2.jpg">
																		<img src="img/portfolio/2/thumbnail3.jpg" height="100" width="100" alt="dolor2" />
																	</a>
																</li>
															</ul>
															
														</li>
													</ul>
												</div>
												<div class="controls">
													<ul class="nav">
														<li class="current"><span>1</span></li>
														<li><span>2</span></li>
													</ul>
													<div class="prev-next">
														<a class="button prev" href="#">&lt; Prev</a><a class="button next" href="#">Next &gt;</a>
													</div>
												</div>
											</div>
											
											<div class="clear"></div>
											
											<div class="portfolio-desc scroll">
												<div class="scrollbar"><div class="track"><div class="thumb"><div class="end"></div></div></div></div>
												<div class="viewport">
													<div class="overview">
														<p class="first">
															Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
															Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut...
														</p>
														<p>
															Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
														</p>
														<p></p>
														<ul class="links">
															<li><a href="#">Website link</a></li>
														</ul>
														<div class="clear"></div>
													</div>
												</div>
											</div>
											
											<!-- * -->
										</article>
									</li>
									
								<!-- Portfolio 3 -->	
									<li id="portfolio3" class="portfolio-item">
										<article>
											<!-- * -->
											
											<h3 class="first">Lorem ipsum dolor</h3>
											
											<div class="slider">
												<div class="viewport">
													<ul class="overview">
														<li class="slide active">
															<a class="lightbox" href="img/portfolio/portfolio3.jpg">
																<img src="img/portfolio/3/thumbnail1.jpg" height="100" width="315" alt="lorem3" />
															</a>
														</li>
														<li class="slide">										
															<a class="lightbox" href="img/portfolio/portfolio3.jpg">
																<img src="img/portfolio/3/thumbnail2.jpg" height="100" width="315" alt="ipsum3" />
															</a>
														</li>
														<li class="slide">
															<a class="lightbox" href="img/portfolio/portfolio3.jpg">
																<img src="img/portfolio/3/thumbnail3.jpg" height="100" width="315" alt="dolor3" />
															</a>
														</li>
													</ul>
												</div>
												<div class="controls">
													<ul class="nav">
														<li class="current"><span>1</span></li>
														<li><span>2</span></li>
														<li><span>3</span></li>
													</ul>
													<div class="prev-next">
														<a class="button prev" href="#">&lt; Prev</a><a class="button next" href="#">Next &gt;</a>
													</div>
												</div>
											</div>
											
											<div class="clear"></div>
											
											<div class="portfolio-desc scroll">
												<div class="scrollbar"><div class="track"><div class="thumb"><div class="end"></div></div></div></div>
												<div class="viewport">
													<div class="overview">
														<p class="first">
															Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
															Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut...
														</p>
														<p></p>
														<ul class="links">
															<li><a href="#">Website link</a></li>
														</ul>
														<div class="clear"></div>
													</div>
												</div>
											</div>
											
											<!-- * -->
										</article>
									</li>
								
								<!-- Portfolio 4 -->
									<li id="portfolio4" class="portfolio-item">
										<article>
											<!-- * -->
											
												<div class="slider big">
												<div class="viewport">
													<ul class="overview">
														<li class="slide active">
															<div class="caption left">
																<div class="caption-inner">
																	<p class="first">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
																</div>
															</div>
															<a class="lightbox" href="img/portfolio/portfolio4.jpg">
																<img src="img/portfolio/4/thumbnail1.jpg" height="215" width="315" alt="lorem4" />
															</a>
														</li>
														<li class="slide">										
															<div class="caption right">
																<div class="caption-inner">
																	<p class="first">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
																</div>
															</div>
															<a class="lightbox" href="img/portfolio/portfolio4.jpg">
																<img src="img/portfolio/4/thumbnail2.jpg" height="215" width="315" alt="ipsum4" />
															</a>
														</li>
														<li class="slide">										
															<div class="caption bottom">
																<div class="caption-inner">
																	<p class="first">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
																</div>
															</div>
															<a class="lightbox" href="img/portfolio/portfolio4.jpg">
																<img src="img/portfolio/4/thumbnail3.jpg" height="215" width="315" alt="dolor4" />
															</a>
														</li>
														<li class="slide">										
															<div class="caption top">
																<div class="caption-inner">
																	<p class="first">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
																</div>
															</div>
															<a class="lightbox" href="img/portfolio/portfolio4.jpg">
																<img src="img/portfolio/4/thumbnail4.jpg" height="215" width="315" alt="si4" />
															</a>
														</li>
													</ul>
												</div>
												<div class="controls">
													<ul class="nav">
														<li class="current"><span>1</span></li>
														<li><span>2</span></li>
														<li><span>3</span></li>
														<li><span>4</span></li>
													</ul>
													<div class="prev-next">
														<a class="button prev" href="#">&lt; Prev</a><a class="button next" href="#">Next &gt;</a>
													</div>
												</div>
											</div>
												
											<!-- * -->			
										</article>
									</li>
									
								<!-- Portfolio 5 -->	
									<li id="portfolio5" class="portfolio-item">
										<article>
											<!-- * -->
										
											<h3 class="first">Lorem ipsum dolor</h3>
											<div class="slider">
												<div class="viewport">
													<ul class="overview">
														<li class="slide active">
														
															<ul class="list-horz">
																<li>
																	<a class="lightbox" href="img/portfolio/portfolio5.jpg">
																	<img src="img/portfolio/5/thumbnail1.jpg" height="100" width="155" alt="lorem5" />
																	</a>
																</li>
																<li>										
																	<a class="lightbox" href="img/portfolio/portfolio5.jpg">
																		<img src="img/portfolio/5/thumbnail2.jpg" height="100" width="155" alt="ipsum5" />
																	</a>
																</li>
															</ul>
															
														</li>
														<li class="slide">										
															
															<ul class="list-horz">
																<li>
																	<a class="lightbox" href="img/portfolio/portfolio5.jpg">
																	<img src="img/portfolio/5/thumbnail1.jpg" height="100" width="155" alt="dolor5" />
																	</a>
																</li>
																<li>										
																	<a class="lightbox" href="img/portfolio/portfolio5.jpg">
																		<img src="img/portfolio/5/thumbnail2.jpg" height="100" width="155" alt="si5" />
																	</a>
																</li>
															</ul>
															
														</li>
														<li class="slide">
															
															<ul class="list-horz">
																<li>
																	<a class="lightbox" href="img/portfolio/portfolio5.jpg">
																	<img src="img/portfolio/5/thumbnail1.jpg" height="100" width="155" alt="amet5" />
																	</a>
																</li>
																<li>										
																	<a class="lightbox" href="img/portfolio/portfolio5.jpg">
																		<img src="img/portfolio/5/thumbnail2.jpg" height="100" width="155" alt="e5" />
																	</a>
																</li>
															</ul>
															
														</li>
													</ul>
												</div>
												<div class="controls">
													<ul class="nav">
														<li class="current"><span>1</span></li>
														<li><span>2</span></li>
														<li><span>3</span></li>
													</ul>
													<div class="prev-next">
														<a class="button prev" href="#">&lt; Prev</a><a class="button next" href="#">Next &gt;</a>
													</div>
												</div>
											</div>
											<div class="clear"></div>
											<p>
												Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
												Ut enim ad minim veniam, quis.
											</p>
										
											<!-- * -->
										</article>
									</li>
								
								<!-- Portfolio 6 -->
									<li id="portfolio6" class="portfolio-item">
										<article>
											<!-- * -->
										
											<div class="scroll">
												<div class="scrollbar"><div class="track"><div class="thumb"><div class="end"></div></div></div></div>
												<div class="viewport">
													<div class="overview">
														<h3 class="first">Lorem ipsum dolor</h3>
														<ul class="list-horz">
															<li>
																<a class="lightbox" href="img/portfolio/portfolio6.jpg">
																	<img src="img/portfolio/6/thumbnail1.jpg" height="70" width="70" alt="lorem6" />
																</a>
															</li>
															<li>										
																<a class="lightbox" href="img/portfolio/portfolio6.jpg">
																	<img src="img/portfolio/6/thumbnail2.jpg" height="70" width="70" alt="ipsum6" />
																</a>
															</li>
															<li>										
																<a class="lightbox" href="img/portfolio/portfolio6.jpg">
																	<img src="img/portfolio/6/thumbnail3.jpg" height="70" width="70" alt="dolor6" />
																</a>
															</li>
															<li>										
																<a class="lightbox" href="img/portfolio/portfolio6.jpg">
																	<img src="img/portfolio/6/thumbnail4.jpg" height="70" width="70" alt="sit6" />
																</a>
															</li>
														</ul>
														
														<ul class="list-horz">
															<li>
																<a class="lightbox" href="img/portfolio/portfolio6.jpg">
																	<img src="img/portfolio/6/thumbnail2.jpg" height="70" width="70" alt="lorem16" />
																</a>
															</li>
															<li>										
																<a class="lightbox" href="img/portfolio/portfolio6.jpg">
																	<img src="img/portfolio/6/thumbnail4.jpg" height="70" width="70" alt="ipsum16" />
																</a>
															</li>
															<li>										
																<a class="lightbox" href="img/portfolio/portfolio6.jpg">
																	<img src="img/portfolio/6/thumbnail1.jpg" height="70" width="70" alt="dolor16" />
																</a>
															</li>
															<li>										
																<a class="lightbox" href="img/portfolio/portfolio6.jpg">
																	<img src="img/portfolio/6/thumbnail3.jpg" height="70" width="70" alt="sit16" />
																</a>
															</li>
														</ul>
														<ul class="list-horz">
															<li>
																<a class="lightbox" href="img/portfolio/portfolio6.jpg">
																	<img src="img/portfolio/6/thumbnail4.jpg" height="70" width="70" alt="lorem26" />
																</a>
															</li>
															<li>										
																<a class="lightbox" href="img/portfolio/portfolio6.jpg">
																	<img src="img/portfolio/6/thumbnail1.jpg" height="70" width="70" alt="ipsum26" />
																</a>
															</li>
															<li>										
																<a class="lightbox" href="img/portfolio/portfolio6.jpg">
																	<img src="img/portfolio/6/thumbnail2.jpg" height="70" width="70" alt="dolor26" />
																</a>
															</li>
															<li>										
																<a class="lightbox" href="img/portfolio/portfolio6.jpg">
																	<img src="img/portfolio/6/thumbnail3.jpg" height="70" width="70" alt="sit26" />
																</a>
															</li>
														</ul>
														
														<div class="clear"></div>
														<p>
															Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
															Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut...
														</p>
														<p></p>
														<ul class="links">
															<li><a href="#">Party link</a></li>
															<li><a href="#">Facebook link</a></li>
														</ul>
													</div>
												</div>	
											</div>
										
											<!-- * -->
										</article>
									</li>
								
								<!-- Portfolio 7 -->
									<li id="portfolio7" class="portfolio-item">
										<article>
											<!-- * -->
											
											<div class="scroll">
												<div class="scrollbar"><div class="track"><div class="thumb"><div class="end"></div></div></div></div>
												<div class="viewport">
													<div class="overview">
														<h3 class="first">Lorem ipsum dolor</h3>
														<ul class="list-horz">
															<li>
																<a class="lightbox" href="img/portfolio/portfolio7.jpg">
																	<img src="img/portfolio/7/thumbnail1.jpg" height="200" width="295" alt="lorem7" />
																</a>
															</li>
														</ul>
														<div class="clear"></div>
														<p>
															Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
															Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut...
														</p>
														<p></p>
														<ul class="links">
															<li><a href="#">Facebook link</a></li>
															<li><a href="#">Website link</a></li>
														</ul>
													</div>
												</div>	
											</div>
											
											<!-- * -->
										</article>
									</li>
									
								<!-- Portfolio 8 -->
									<li id="portfolio8" class="portfolio-item">
										<article>
											<!-- * -->
											
											<div class="scroll">
												<div class="scrollbar"><div class="track"><div class="thumb"><div class="end"></div></div></div></div>
												<div class="viewport">
													<div class="overview">
														<h3 class="first">Lorem ipsum dolor</h3>
														<ul class="list-horz">
															<li>
																<a class="lightbox" href="img/portfolio/portfolio8.jpg">
																	<img src="img/portfolio/8/thumbnail1.jpg" height="100" width="145" alt="lorem8" />
																</a>
															</li>
															<li>										
																<a class="lightbox" href="img/portfolio/portfolio8.jpg">
																	<img src="img/portfolio/8/thumbnail2.jpg" height="100" width="145" alt="ipsum8" />
																</a>
															</li>
														</ul>
														<ul class="list-horz">
															<li>
																<a class="lightbox" href="img/portfolio/portfolio8.jpg">
																	<img src="img/portfolio/8/thumbnail3.jpg" height="100" width="145" alt="dolor8" />
																</a>
															</li>
															<li>										
																<a class="lightbox" href="img/portfolio/portfolio8.jpg">
																	<img src="img/portfolio/8/thumbnail4.jpg" height="100" width="145" alt="sit8" />
																</a>
															</li>
														</ul>
														<div class="clear"></div>
														<p>
															Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
															Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut...
														</p>
														<p></p>
														<ul class="links">
															<li><a href="#">Facebook link</a></li>
															<li><a href="#">Website link</a></li>
														</ul>
													</div>
												</div>	
											</div>
											
											<!-- * -->
										</article>
									</li>
									
								</ul>
							</div>
							
							<!-- Portfolio animated wall -->
							<div class="portfolio-list slider">
								<div class="viewport">
									<ul class="overview">
										<li class="slide active">
											<ul id="portfolio-list">
												<li id="portfolio-link1" class="portfolio-link vert c2" style="">
													<a href="#portfolio1"><img class="preload" src="img/portfolio/portfolio1-thumbnail.jpg" alt="portfoliolink1"></a>
												</li>
												<li id="portfolio-link2" class="portfolio-link vert c1">
													<a href="#portfolio2"><img class="preload" src="img/portfolio/portfolio2-thumbnail.jpg" alt="portfoliolink2"></a>
												</li>
												<li id="portfolio-link3" class="portfolio-link horz c1">
													<a href="#portfolio3"><img class="preload" src="img/portfolio/portfolio3-thumbnail.jpg" alt="portfoliolink3"></a>
												</li>
												<li id="portfolio-link4" class="portfolio-link vert c2" style="float:right;">
													<a href="#portfolio4"><img class="preload" src="img/portfolio/portfolio4-thumbnail.jpg" alt="portfoliolink4"></a>
												</li>
												<li id="portfolio-link5" class="portfolio-link horz c2" style="float:right;">
													<a href="#portfolio5"><img class="preload" src="img/portfolio/portfolio5-thumbnail.jpg" alt="portfoliolink5"></a>
												</li>
												<li id="portfolio-link6" class="portfolio-link horz c2">
													<a href="#portfolio6"><img class="preload" src="img/portfolio/portfolio6-thumbnail.jpg" alt="portfoliolink6"></a>
												</li>
												<li id="portfolio-link7" class="portfolio-link vert c1">
													<a href="#portfolio7"><img class="preload" src="img/portfolio/portfolio7-thumbnail.jpg" alt="portfoliolink7"></a>
												</li>
												<li id="portfolio-link8" class="portfolio-link horz c1">
													<a href="#portfolio8"><img class="preload" src="img/portfolio/portfolio8-thumbnail.jpg" alt="portfoliolink8"></a>
												</li>
											</ul>
										</li>
										<li class="slide">									
											<ul id="portfolio-list">
												<li id="portfolio-link9" class="portfolio-link horz c1">
													<a href="#portfolio8"><img class="preload" src="img/portfolio/portfolio8-thumbnail.jpg" alt="portfoliolink8"></a>
												</li>
												<li id="portfolio-link10" class="portfolio-link horz c1">
													<a href="#portfolio8"><img class="preload" src="img/portfolio/portfolio8-thumbnail.jpg" alt="portfoliolink8"></a>
												</li>
												<li id="portfolio-link11" class="portfolio-link horz c1">
													<a href="#portfolio8"><img class="preload" src="img/portfolio/portfolio8-thumbnail.jpg" alt="portfoliolink8"></a>
												</li>
											</ul>
										</li>
									</ul>
								</div>
								<div class="controls">
									<!--
									<ul class="nav">
										<li class="current"><span>1</span></li>
										<li class=""><span>2</span></li>
									</ul>
									-->
									<div class="prev-next">
										<a href="#" class="button prev">&lt; Prev</a><a href="#" class="button next">Next &gt;</a>
									</div>
								</div>
							</div>
							
						</div>
						
						<!-- * -->
					</section>
				</div>
				
				<!-- Pages -->
				<div id="page">
					<div id="table" >
						<section>
							<!-- * -->
							
							<ul id="table-content">
							
								<!-- Home page -->
								<li class="content" id="home">
									<article>
										<!-- * -->
										
										<p class="center">
											<a class="lightbox" href="img/portrait.jpg">
												<div class="avatar"><img alt="An Le" src="img/avatar.jpg"></div>
											</a>
										</p>
										<p></p>
										<h1 class="margin center">An Le</h1>
										<p class="center font">Freelance Developer & WebDesigner</p>
									
										<!-- * -->
									</article>
								</li>
								
								<!-- About page -->
								<li class="content pages" id="about">
									<article>
										<!-- * -->
										
										<div class="pages-wrapper">
										
											<div class="page">
												<h3 class="first">About me</h3>
												<p>
													Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
													Ut enim ad minim veniam...
												</p>
												<h3>My skills</h3>
												
												<div id="skills-list" class="scroll">
													<div class="scrollbar"><div class="track"><div class="thumb"><div class="end"></div></div></div></div>
													<div class="viewport">
														<div class="overview">
													
															<ul class="skills">
																<li><span class="skill-item">Photoshop</span><span class="skill-rate">+ + + + + + + + + + + +</span></li>
																<li><span class="skill-item">Illustrator</span><span class="skill-rate">+ + + + + +</span></li>
																<li><span class="skill-item">InDesign</span><span class="skill-rate">+ + + + + + + + + + +</span></li>
																<li><span class="skill-item">Html5</span><span class="skill-rate">+ + + + + + +</span></li>
																<li><span class="skill-item">Css3</span><span class="skill-rate">+ + + + + + + + +</span></li>
																<li><span class="skill-item">Javascript</span><span class="skill-rate">+ + + + + + + + +</span></li>
																<li><span class="skill-item">Joomla CMS</span><span class="skill-rate">+ + + + + + + + + + + + +</span></li>
																<li><span class="skill-item">Wordpress CMS</span><span class="skill-rate">+ + + + + + + +</span></li>
																<li><span class="skill-item">ImpressPages CMS</span><span class="skill-rate">+ + + + + + + + +</span></li>
															</ul>
															
														</div>
													</div>
												</div>
											</div>
											
											<div class="page scroll">
												<div class="scrollbar"><div class="track"><div class="thumb"><div class="end"></div></div></div></div>
												<div class="viewport">
													<div class="overview">
													
														<h3 class="first">Experience</h3>
														<ul class="timeline">
															<li>				   
																<div class="timeline-item">
																	<hgroup>
																		<h4>Freelance Graphic/Web Designer<span class="timeline-date">2011 - Present</span></h4>
																		<h5>Labore Et Dolore</h5>
																	</hgroup>
																	<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
																</div>
															</li>
															<li>
																<div class="timeline-item">
																	<hgroup>
																		<h4>Lorem Ipsum<span class="timeline-date">2008 - 2011</span></h4>
																		<h5>Labore Et Dolore</h5>
																	</hgroup>
																	<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
																</div>
															</li>
															<li>
																<div class="timeline-item">
																	<hgroup>
																		<h4>Dolor Sit Amet<span class="timeline-date">2008</span></h4>
																		<h5>Labore Et Dolore</h5>
																	</hgroup>
																	<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
																</div>
															</li>
														</ul>
														
														<div  class="clear"></div>
														
														<p><br/></p>
														
														<h3>Education</h3>
														<ul class="timeline">
															<li>				   
																<div class="timeline-item">
																	<hgroup>
																		<h4>Web Design<span class="timeline-date">2006 - 2008</span></h4>
																		<h5>Labore Et Dolore</h5>
																	</hgroup>
																	<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
																</div>
															</li>
															<li>
																<div class="timeline-item">
																	<hgroup>
																		<h4>Graphic Design<span class="timeline-date">2004 - 2006</span></h4>
																		<h5>Labore Et Dolore</h5>
																	</hgroup>
																	<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
																</div>
															</li>
														</ul>
														<div class="clear"></div>

														<p><a class="button" href="#"><span>Download My Curriculum Vitae</span></a></p>
													</div>
												</div>
											</div>
											
										</div>
										
										<!-- * -->
									</article>
								</li>
								
								<!-- Services pages -->
								<li class="content" id="services">
									<article>
										<!-- * -->
								
										<h3 class="first">What i do</h3>
										<ul class="services first">
											<li>				   
												<div class="service-item">
													<h4>Web Design</h4>
													<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed...</p>
												</div>
											</li>
											<li>				   
												<div class="service-item">
													<h4>Logo Design</h4>
													<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do...</p>
												</div>
											</li>
										</ul>
										<ul class="services">
											<li>				   
												<div class="service-item">
													<h4>Graphic Design</h4>
													<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do...</p>
												</div>
											</li>
											<li>				   
												<div class="service-item">
													<h4>Photo Retouching</h4>
													<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed...</p>
												</div>
											</li>
										</ul>
									
										<!-- * -->
									</article>
								</li>
								
								<!-- Network page -->
								<li class="content" id="network">
									<article>
										<!-- * -->
								
										<h3 class="first">My social network</h3>
										
										<div id="tweets" class="tweets" data-user="envato">
											<!-- Tweets are loaded here -->
										</div>
										<!--
										<ul class="network">
											<li>
												<a class="network-icon" href="http://www.facebook.com/lehoaian" target="_blank">
													<img src="img/network/facebook.png" height="32" width="32" alt="facebook"  />
												</a>
												<a class="network-link" href="http://www.facebook.com/lehoaian" target="_blank">Facebook</a>
											</li>
											<li>
												<a class="network-icon" href="http://www.twitter.com/lehoaian" target="_blank">
													<img src="img/network/twitter.png" height="32" width="32" alt="twitter"  />
												</a>
												<a class="network-link" href="http://www.twitter.com/lehoaian" target="_blank">Twitter</a>
											</li>
										</ul>
										
										<ul class="network">
											<li>
												<a class="network-icon" href="http://www.flickr.com" target="_blank">
													<img src="img/network/flickr.png" height="32" width="32" alt="flickr"  />
												</a>
												<a class="network-link" href="http://www.flickr.com" target="_blank">Flickr</a>
											</li>
											<li>
												<a class="network-icon" href="http://www.linkedin.com" target="_blank">
													<img src="img/network/linkedin.png" height="32" width="32" alt="linkedin"  />
												</a>
												<a class="network-link" href="http://www.linkedin.com" target="_blank">LinkedIn</a>
											</li>
										</ul>
										<ul class="network">
											<li>
												<a class="network-icon" href="http://www.google.com" target="_blank">
													<img src="img/network/google.png" height="32" width="32" alt="google+"  />
												</a>
												<a class="network-link" href="http://www.google.com" target="_blank">Google+</a>
											</li>
											<li>
												<a class="network-icon" href="http://www.delicious.com" target="_blank">
													<img src="img/network/delicious.png" height="32" width="32" alt="delicious"  />
												</a>
												<a class="network-link" href="http://www.delicious.com" target="_blank">delicious</a>
											</li>
										</ul>
										-->
										<!-- * -->
									</article>
								</li>
								
								<!-- Contact page -->
								<li class="content pages" id="contact">
									<article>
										<!-- * -->
									
										<div class="pages-wrapper">
											<div class="page">
												<h3 class="first">Contact info</h3>
												<div id="contact-map" class="map small" data-address="Da Nang, Viet Nam"></div>
												<div class="clear"></div>
												<p></p>
												<div id="contact-details" class="scroll">
													<div class="scrollbar"><div class="track"><div class="thumb"><div class="end"></div></div></div></div>
													<div class="viewport">
														<div class="overview">
															<ul class="info">
																<li>Da Nang, Viet Nam</li>
																<li>Phone : +84 973 178 495</li>
																<li>Email : lehoaian.it@email.com</li>
																<li>Website : wwww.lehoaian.info</li>
															</ul>
														</div>
													</div>
												</div>
											</div>
											<div class="page">
												<h3 class="first">Let's keep in touch</h3>
												<form id="contact-form" name="contact-form" action="lib/email.php" method="post">
													<fieldset>
														<input id="contact-name" type="text" name="name" value="Your Name"/>
														<input id="contact-email" type="text" name="email" value="Email@email.com" />
														<textarea id="contact-message" name="message">Type your message here...</textarea>
													</fieldset>
												</form>
												<span>
													<a id="submit" class="button" href="#"><span>Send your message</span></a>
												</span>
												<span id="contact-response">
													<a href="#" id="email-loading">loading</a>
												</span>
											</div>
										</div>
										
										<!-- * -->
									</article>
								</li>
							</ul>
							
							<!-- * -->
						</section>
					</div>
				</div>
			
			</div>
	
			<div id="back-button">
				<a href="#main-content">Go Back</a>
			</div>
		</div>
	</div>
	<div class="clear"></div>
	<!-- Scripts-->
	<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
	<!-- Lightbox -->
	<script type="text/javascript" src="js/jquery.zoombox.js"></script>
	<!-- Timer -->
	<script type="text/javascript" src="js/jquery.ba-dotimeout.min.js"></script>
	<!-- Tweeter -->
	<script type="text/javascript" src="js/jquery.tweetable.js"></script>
	<!-- Scroll Bar -->
	<script type="text/javascript" src="js/jquery.tinyscrollbar.min.js"></script>
	<!-- Image Preloader -->
	<script type="text/javascript" src="js/jquery.imgpreload.min.js"></script>
	<!-- Google Map -->
	<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
	<script type="text/javascript" src="js/jquery.gmap.min.js"></script>
	<script type="text/javascript" src="js/wtf-scripts.js"></script>
	<script src="js/plugins.js"></script>
	<script src="js/jquery.picasa.js"></script>
	<script type="text/javascript">
	(function($) {
		$(function(){
			$.picasa.image('100147644569168145313', '5806191749592767410', function(image) {
				console.info(image);
			});
		});
	})(jQuery)
	</script>
</body>
</html>